<template>
	<view class="pageView">
		<u-loading-page :loading="productLoading" bg-color="#e8e8e8"></u-loading-page>
		<image class="pageHead" :src="infoData.img_url"></image>
		<view class="backBtn">
			<u-icon name="arrow-left" color="#333" @click="handleBack"></u-icon>
		</view>
		<view class="pageContenTop">
			<view class="pageContenTop-priceBlock">
				<text class="pageContenTop-priceBlock-fu">¥</text>
				<text class="pageContenTop-priceBlock-num">{{ infoData.price }}</text>
				<text class="pageContenTop-priceBlock-unit">元/次</text>
			</view>
			<view class="pageContenTop-title">{{ infoData.name }}</view>
			<u-divider></u-divider>
			<view class="pageContenTop-content">{{ infoData.intro }}</view>
			<view class="pageContenTop-warBlock">
				<view class="pageContenTop-warBlock-item">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/checjI.png" class="pageContenTop-warBlock-item-img"></image>
					<view class="pageContenTop-warBlock-item-itemFont">省时高效</view>
				</view>
				<view class="pageContenTop-warBlock-item">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/checjI.png" class="pageContenTop-warBlock-item-img"></image>
					<view class="pageContenTop-warBlock-item-itemFont">放心安全</view>
				</view>
				<view class="pageContenTop-warBlock-item">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/checjI.png" class="pageContenTop-warBlock-item-img"></image>
					<view class="pageContenTop-warBlock-item-itemFont">官方直营</view>
				</view>
				<view class="pageContenTop-warBlock-item">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/checjI.png" class="pageContenTop-warBlock-item-img"></image>
					<view class="pageContenTop-warBlock-item-itemFont">全程无忧</view>
				</view>
			</view>
		</view>
		<view class="userReviewsBlock">
			<view class="userReviewsBlock-block">
				<view class="userReviewsBlock-block-head">
					<view class="userReviewsBlock-block-head-title">用户评价({{ commonTotal }})</view>
					<view class="userReviewsBlock-block-head-right" @click="handleAllCommon">
						<view class="userReviewsBlock-block-head-right-font">查看全部</view>
						<u-icon name="arrow-right" color="#333" size="10"></u-icon>
					</view>
				</view>
				<u-divider></u-divider>
				<view class="userReviewsBlock-block-reviewHead">
					<view class="userReviewsBlock-block-reviewHead-left">
						<image :src="commonItem.user.avatar_url" class="userReviewsBlock-block-reviewHead-left-avater"></image>
						<view class="userReviewsBlock-block-reviewHead-left-username">{{ commonItem.user.name }}</view>
					</view>
					<view class="userReviewsBlock-block-reviewHead-right">{{ commonItem.created_at }}</view>
				</view>
				<view class="userReviewsBlock-block-reviewContent">{{ commonItem.content }}</view>
			</view>
		</view>
		<view class="reserveTitle">
			<view class="reserveTitle-left"></view>
			<view class="reserveTitle-middle">服务详情</view>
			<view class="reserveTitle-right"></view>
		</view>
		<view class="detailBlock">
			<image :src="infoData.main_img_url"></image>
		</view>
		<view class="btnBlock">
			<button @click="handleCreateOreder">立即预约</button>
		</view>
	</view>
</template>

<script>
	import { getPzServiceInfo, getCommentList } from '@/api/common.js'
	export default{
		data() {
			return {
				productLoading: false,
				infoData: null,
				commonItem: null,
				commonTotal: 0
			}
		},
		onShow() {
			this.getInfoData()
		},
		methods: {
			getList() {
				getCommentList({
					id: uni.getStorageSync('productDetail').id
				}).then(res => {
					const { code, data } = res
					if (code == 200001) {
						this.commonItem = data.data[0]
						this.commonTotal = data.total
					}
					this.productLoading = false
				}).catch(e => {
					this.productLoading = false
				})
			},
			getInfoData() {
				this.productLoading = true
				getPzServiceInfo({
					id: uni.getStorageSync('productDetail').id
				}).then(res => {
					const { code, data } = res
					if (code == 200001) {
						this.infoData = data
					}
					this.getList()
				})
				.catch(e => {
					this.productLoading = false
				})
			},
			handleCreateOreder() {
				uni.navigateTo({
					url: '/pages/createOrder/createOrder'
				})
			},
			handleBack() {
				uni.navigateTo({
					url: uni.getStorageSync('productDetail').url
				})
			},
			handleAllCommon() {
				uni.navigateTo({
					url: '/pages/allCommon/allCommon'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.pageView{
		height: 246vh;
		background: #F4F4F4;
		.pageHead{
			position: relative;
			width: 750rpx;
			height: 480rpx;
		}
		.backBtn{
			position: absolute;
			top: 110rpx;
			left: 24rpx;
		}
		.pageContenTop{
			padding: 32rpx;
			position: absolute;
			z-index: 1000;
			top: 450rpx;
			height: 422rpx;
			width: 686rpx;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			background: #fff;
			&-priceBlock{
				&-fu{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #E5432E;
				}
				&-num{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: bold;
					font-size: 52rpx;
					color: #E5432E;
				}
				&-dian{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #E5432E;
				}
				&-unit{
					padding-left: 16rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #222222;
				}
			}
			&-title{
				padding-top: 32rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 40rpx;
				color: #222222;
			}
			&-content{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: #999999;
			}
			&-warBlock{
				padding: 16rpx;
				margin-top: 32rpx;
				width: 654rpx;
				height: 50rpx;
				background: rgba(1,101,251,0.05);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&-item{
					display: flex;
					align-items: center;
					&-img{
						width: 32rpx;
						height: 32rpx;
					}
					&-itemFont{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 24rpx;
						color: #999999;
						padding-left: 8rpx;
					}
				}
			}
		}
		.userReviewsBlock{
			position: absolute;
			top: 962rpx;
			padding: 0px 32rpx;
			&-block{
				width: 686rpx;
				height: 272rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				&-head{
					padding: 32rpx 32rpx 0px 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-title{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 32rpx;
						color: #333333;
					}
					&-right{
						display: flex;
						align-items: center;
						&-font{
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 24rpx;
							color: #999999;
							padding-right: 6rpx;
						}
					}
				}
				&-reviewHead{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0px 32rpx;
					&-left{
						display: flex;
						align-items: center;
						&-avater{
							width: 56rpx;
							height: 56rpx;
							border-radius: 100% 100%;
						}
						&-username{
							padding-left: 16rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
						}
					}
					&-right{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 24rpx;
						color: #999999;
					}
				}
				&-reviewContent{
					padding-left: 104rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
			}
		}
		.reserveTitle{
			position: absolute;
			top: 1270rpx;
			left: 260rpx;
			z-index: 10000;
			display: flex;
			justify-content: center;
			align-items: center;
			&-left{
				width: 10rpx;
				height: 10rpx;
				background: #2277F7;
				border-radius: 100% 100%;
			}
			&-middle{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
				padding-left: 28rpx;
				padding-right: 28rpx;
			}
			&-right{
				width: 10rpx;
				height: 10rpx;
				background: #2277F7;
				border-radius: 100% 100%;
			}
		}
		.detailBlock{
			position: absolute;
			top: 1360rpx;
			padding: 0px 32rpx;
			image{
				width: 686rpx;
				height: 2458rpx;
			}
		}
		.btnBlock{
			position: absolute;
			top: 3860rpx;
			padding: 34rpx 32rpx;
			background: #fff;
			button{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 686rpx;
				height: 80rpx;
				background: #0165FB;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>